new Vue({
    el: '#app',
    data() {
        return {
            // 筛选条件
            selectedBatch: '',
            materialStatus: '',
            teamName: '',

            // 分页
            currentPage: 1,
            totalPages: 5,

            // 队伍材料数据
            teams: [
            ]
        };
    },
    computed: {
        // 筛选后的队伍列表
        filteredTeams() {
            return this.teams.filter(team => {
                // 批次筛选
                const matchesBatch = this.selectedBatch ? team.batch.includes(this.selectedBatch) : true;

                // 队伍名称筛选
                const matchesTeamName = this.teamName ? team.name.includes(this.teamName) : true;

                // 材料状态筛选
                let matchesMaterialStatus = true;
                if (this.materialStatus === 'complete') {
                    matchesMaterialStatus = team.completionRate === 100;
                } else if (this.materialStatus === 'incomplete') {
                    matchesMaterialStatus = team.completionRate > 0 && team.completionRate < 100;
                } else if (this.materialStatus === 'none') {
                    matchesMaterialStatus = team.completionRate === 0;
                }

                return matchesBatch && matchesTeamName && matchesMaterialStatus;
            });
        }
    },
    methods: {
        // 获取材料状态显示文本
        getMaterialStatusText(status) {
            return status === 'completed' ? '已上传' : '未上传';
        },

        // 获取材料状态样式类
        getMaterialStatusClass(status) {
            return status === 'completed' ? 'material-completed' : 'material-pending';
        },

        // 搜索
        search() {
            this.currentPage = 1;
            console.log('搜索条件:', {
                batch: this.selectedBatch,
                materialStatus: this.materialStatus,
                teamName: this.teamName
            });
        },

        // 重置筛选条件
        resetFilter() {
            this.selectedBatch = '';
            this.materialStatus = '';
            this.teamName = '';
            this.currentPage = 1;
        },

        // 查看材料详情
        viewMaterials(teamId) {
            const team = this.teams.find(t => t.id === teamId);
            if (team) {
                console.log(`查看队伍 ${team.name} 的材料详情`);
                alert(`查看队伍 ${team.name} 的材料详情：\n${team.materials.map(m =>
                    `${m.name}: ${this.getMaterialStatusText(m.status)}${m.uploadTime ? ' (' + m.uploadTime + ')' : ''}`
                ).join('\n')}`);
            }
        },

        // 提醒上传
        remindUpload(teamId) {
            const team = this.teams.find(t => t.id === teamId);
            if (team) {
                console.log(`提醒队伍 ${team.name} 上传材料`);
                alert(`已向 ${team.name} 的队长 ${team.leaderName} 发送材料上传提醒`);
            }
        }
    }
});
